<template>
	<el-dialog
		title="基金文件导出"
		:visible.sync="fundFileShow"
		width="50%"
		:before-close="cancel"
		:close-on-click-modal="false"
		top="10vh"
		:close-on-press-escape="false"
	>
		<el-form ref="form" :model="form" label-width="110px" label-position="left" :rules="rules">
			<el-form-item label="基金类型：" prop="fundRaiseType">
				<el-radio-group v-model="form.fundRaiseType" @change="fundTypeChange">
					<el-radio label="1" value="1">公募基金</el-radio>
					<el-radio label="2" value="2">专户产品</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="产品运作状态：">
				<el-select v-model="form.statusList" @change="fundChange" placeholder="请选择" style="width: 100%" clearable filterable multiple>
					<el-option
						v-for="(item, index) in enumData.fundOperationStatus"
						:key="item.typeCode + index"
						:label="item.typeName"
						:value="item.typeCode"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="责任人：">
				<el-select
					@change="fundChange"
					:disabled="!form.fundRaiseType"
					v-model="form.personLiableId"
					placeholder="请选择"
					style="width: 100%"
					clearable
					filterable
				>
					<el-option
						v-for="(item, index) in personLiableList"
						:key="index + 'a'"
						:label="item.personLiableName"
						:value="item.personLiableId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="复核人：">
				<el-select
					:disabled="!form.fundRaiseType"
					@change="fundChange"
					v-model="form.checkLiableId"
					placeholder="请选择"
					style="width: 100%"
					clearable
					filterable
				>
					<el-option
						v-for="(item, index) in checkLiableList"
						:key="index + 'a'"
						:label="item.checkLiableName"
						:value="item.checkLiableId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="基金名称：">
				<el-select
					:disabled="!form.fundRaiseType"
					v-model="form.fundSysCodes"
					placeholder="请选择"
					style="width: 100%"
					clearable
					filterable
					:loading="expoertLoading"
					multiple
				>
					<!-- v-loading="expoertLoading"
					element-loading-text="正在加载基金数据，请耐心等待"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)" -->
					<el-option
						v-for="(item, index) in fundList"
						:key="index + item.fundSysCode"
						:label="item.fundCode + '-' + item.fundFullName"
						:value="item.fundSysCode"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="文件类型：">
				<el-select
					:disabled="!form.fundRaiseType"
					multiple
					v-model="form.fileIds"
					placeholder="请选择"
					style="width: 100%"
					clearable
					filterable
				>
					<el-option v-for="(item, index) in fileTypes" :key="index + 'file'" :label="item.title" :value="item.objName" />
				</el-select>
			</el-form-item>
			<el-form-item label="文件版本：">
				<el-select v-model="form.fileType" placeholder="请选择" style="width: 100%" clearable filterable>
					<el-option value="1" label="WORD版"></el-option>
					<el-option value="2" label="盖章版"></el-option>
					<el-option value="3" label="PDF版"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="导出文件：">
				<el-radio-group v-model="form.isLatest">
					<el-radio label="1">最新文件</el-radio>
					<el-radio label="2">全部文件</el-radio>
				</el-radio-group>
			</el-form-item>
            <el-form-item label="保存类型：" prop="saveType">
				<el-radio-group v-model="form.saveType">
					<el-radio label="1">按基金</el-radio>
					<el-radio label="2">按文件类型</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="cancel" size="small" :disabled="expoertLoading">取 消</el-button>
			<el-button type="primary" @click="submitForm" size="small" :disabled="expoertLoading" :loading="expoertLoading">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
import { FileTypeList } from './index'
import { getFileExportFundList } from '@/api/productApi/mechanism'
import { exportFundFile } from '@/api/graphQl/fundDataExport'
import { Loading } from 'element-ui'
import { returnData } from '@/utils/dataType'
export default {
	props: {
		fundFileShow: {
			type: Boolean,
			default: false
		},
		enumData: {
			type: Object,
			default: Object
		},
		managerList: {
			type: Array,
			default: Array
		},
		checckPersonList: {
			type: Array,
			default: Array
		},
		fundFileFunc: {
			type: Function,
			default: Function
		}
	},

	data() {
		return {
			form: {
				fundRaiseType: '',
				statusList: [],
				personLiableId: '',
				checkLiableId: '',
				fundSysCodes: [],
				fileIds: [],
				fileType: '3',
				isLatest: '1',
                saveType: ''
			},
			personLiableList: [],
			checkLiableList: [],
			expoertLoading: false,
			fileTypes: [],
			fundList: [],
			rules: {
				fundRaiseType: [{ required: true, message: '请选择基金类型', trigger: 'change' }],
				saveType: [{ required: true, message: '请选择保存类型', trigger: 'change' }]
			},
			loadingOptions: {
				text: '文件较大，正在获取，请耐心等待......',
				background: 'rgba(0, 0, 0, 0.8)',
				spinner: 'el-icon-loading'
			}
		}
	},

	methods: {
		// 切换基金类型，清空联动数据
		fundTypeChange() {
			this.form.fundSysCodes = []
			this.form.personLiableId = ''
			this.form.checkLiableId = ''
			this.form.fileIds = []
			this.personLiableList = this.managerList.filter(item => item.fundRaiseType === this.form.fundRaiseType)
			this.checkLiableList = this.checckPersonList.filter(item => item.fundRaiseType === this.form.fundRaiseType)
			this.fileTypes = FileTypeList.filter(item => item.fundRaiseType === this.form.fundRaiseType)
			this.getFundList()
		},

		// 获取基金列表
		getFundList() {
			const obj = {
				personLiableId: this.form.personLiableId,
				checkLiableId: this.form.checkLiableId,
				fundRaiseType: this.form.fundRaiseType,
				statusList: this.form.statusList,
                moduleStatus: ['3', '4', '5']
			}
			this.expoertLoading = true
			this.fundList = []
			getFileExportFundList(obj, { num: 1, size: 10000 })
				.then(res => {
					if (res.msgCode === 'Y') {
						this.fundList = res.data.body.filter(item => !!item.fundSysCode)
					}
				})
				.finally(() => {
					this.expoertLoading = false
				})
		},

		// 取消
		cancel() {
			this.$emit('fundFileShowFunc')
			this.resetForm()
			this.form = {
				fundRaiseType: '',
				statusList: [],
				personLiableId: '',
				checkLiableId: '',
				fundSysCodes: [],
				fileIds: [],
				fileType: '3',
				isLatest: '1',
                saveType: ''
			}
		},

		submitForm() {
			this.$refs.form.validate(valid => {
				if (valid) {
					Loading.service(this.loadingOptions)
					exportFundFile(this.form)
						.then(response => {
							if (returnData(response) !== 'Object') {
								const blob = new Blob([response], { type: 'application/force-download;charset=utf-8' })
								const downloadElement = document.createElement('a')
								const href = window.URL.createObjectURL(blob) // 创建下载的链接
								downloadElement.href = href
								downloadElement.download = `导出基金文件${this.returnDate()}.zip` // 下载后文件名
								document.body.appendChild(downloadElement)
								downloadElement.click() // 点击下载
								document.body.removeChild(downloadElement) // 下载完成移除元素
								window.URL.revokeObjectURL(href) // 释放掉blob对象
							} else {
								this.$message({ type: 'error', message: response.msg })
							}
						})
						.finally(() => {
							const loadingInstance = Loading.service(this.loadingOptions)
							this.$nextTick(() => {
								loadingInstance.close()
								this.cancel()
							})
						})
				}
			})
		},

		resetForm() {
			this.$refs.form.resetFields()
		},

		returnDate() {
			const year = new Date().getFullYear()
			const moon = `${new Date().getMonth() + 1}`.length > 1 ? `${new Date().getMonth() + 1}` : `0${new Date().getMonth() + 1}`
			const day = `${new Date().getDate()}`.length > 1 ? `${new Date().getDate()}` : `0${new Date().getDate()}`
			return `${year}-${moon}-${day}`
		},

		fundChange() {
			this.form.fundSysCodes = []
			this.getFundList()
		}
	}
}
</script>
<style lang="scss" scoped >
::v-deep .el-loading-spinner {
	display: flex;
	height: 40px;
	align-items: center;

	i {
		height: 15px;
		margin: 0 7px 0 10px;
	}
}
</style>
